<template>
	<u-sticky :customNavHeight="customNavHeight">
		<view class="NavFiexd">
			<view class="flex-1">
				<u-tabs :list="list" :lineColor="Pinia.color" :itemStyle="itemStyle" :lineWidth="24"
					:activeStyle="activeStyle" @click="click"></u-tabs>
			</view>
			<view class="d-flex a-center color" @click="show = true">
				<text class="size30">相亲条件</text>
				<view class="iconfont icon-xiangxia bold size32 m-left10"></view>
			</view>
		</view>
	</u-sticky>

	<view class="masking" v-if="show" @click.stop="show = false">
		<u-popup :show="true" mode="top" safeAreaInsetTop :safeAreaInsetBottom="false">
			<view class="popup " :style="{'padding-top':`${Pinia.BarHeight}px`}">
				<view class="popScroll">
					<view class="Search">
						<view class="iconfont icon-a-zu3618 color_cc size32"></view>
						<input type="text" v-model="sn_id" class="flex-1 height size26 color_33 p-left20"
							placeholder="请输入ID搜索" placeholder-class="place" />
					</view>
					<block v-for="(item,index) in filterData" :key="index">
						<view class="Screen">
							<text class="black size28">{{item.title}}</text>
							<view class="row">
								<view class="ScreenList" @click="selectFilt(index,'')" :class="{'active':!item.val}">不限
								</view>
								<view class="ScreenList" :class="{'active':item.val == sItem}"
									@click="selectFilt(index,sItem)" v-for="(sItem,sIndex) in item.range" :key="sIndex">
									{{sItem}}
								</view>
							</view>
						</view>
					</block>

				</view>
				<view class="popConfig ">
					<view class="Reset" @click="Reset">
						<view class="iconfont icon-reset color size30"></view>
						<text class="color_99 size28 m-top10">重置</text>
					</view>
					<view class="continum" @click="Continue">确定</view>
				</view>

			</view>
		</u-popup>
	</view>

</template>

<script setup>
	import { defineProps, computed, ref, onBeforeMount } from 'vue';
	import { usePiniaStore } from '@/store/pinia.js';
	import Http from '@/common/request.js';

	const Pinia = usePiniaStore();
	const list = ref([{
		name: '活跃',
		order: 'views',
	}, {
		name: '精品',
		order: 'recommend',
	}, {
		name: '实名',
		order: 'real_name',
	}, {
		name: '最新',
		order: 'new',
	}]);
	const order = ref('views');
	const itemStyle = ref({ height: '36px' });
	const activeStyle = ref({
		fontWeight: 'bold',
		fontSize: '30rpx',
		transform: 'scale(1.04)',
		color: Pinia.color
	});
	const inactiveStyle = ref({ transform: 'scale(1)' });
	const show = ref(false);
	const sn_id = ref('');
	const filterData = ref([]);

	const emit = defineEmits(['resetData']);
	onBeforeMount(() => {
		getFilter();
	})


	const getFilter = () => {
		Http.post({
			url: '/WeddingApi/getFilter',
		}).then(res => {
			if (res.code != '100') return;
			const result = res.data || [];
			result.forEach((item, index) => {
				item.val = '';
			})
			filterData.value = result;
		})
	}


	const selectFilt = (index, sItem) => {
		filterData.value[index].val = sItem
	}

	const Continue = () => {
		let data = {};
		filterData.value.forEach(item => {
			data[item.key] = item.val;
		})
		data['sn_id'] = sn_id.value;
		data['order'] = order.value;
		show.value = false;
		emit('resetData', data);
	}

	const Reset = () => {
		filterData.value.forEach(item => {
			item.val = '';
		})
		sn_id.value = '';
	}

	const click = (e) => {
		order.value = e.order;
		Continue();
	}

	const customNavHeight = computed(() => {
		return Pinia.System.statusBarHeight + Pinia.BarHeight;
	})
</script>

<style lang="scss" scoped>
	.NavFiexd {
		width: 100%;
		height: 80rpx;
		padding: 0 30rpx 0 18rpx;
		background-color: $pageBg;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.popup {
		width: 100%;
		min-height: 500rpx;
		height: 1100rpx;
		display: flex;
		flex-direction: column;
	}

	.popScroll {
		flex: 1;
		padding-left: 30rpx;
		overflow: scroll;
	}

	.Search {
		width: 690rpx;
		height: 80rpx;
		margin: 20rpx 0;
		background-color: $pageBg;
		border-radius: 10rpx;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
	}

	.place {
		color: #ccc;
	}

	.Screen {
		width: 100%;
		margin-bottom: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid $pageBg;
		display: flex;
		flex-direction: column;
	}

	.ScreenList {
		width: 216rpx;
		height: 60rpx;
		padding: 0 10rpx;
		background-color: $pageBg;
		color: #333;
		font-size: 26rpx;
		border-radius: 30rpx;
		margin-top: 20rpx;
		margin-right: 20rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		text-align: center;
		line-height: 60rpx;
	}

	.ScreenList:nth-child(3n) {
		margin-right: 0;
	}

	.active {
		background-color: $themeColor;
		color: #ffffff;
	}

	.popConfig {
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		background-color: #ffffff;
	}

	.continum {
		flex: 1;
		height: 80rpx;
		margin-right: 30rpx;
		border-radius: 40rpx;
		box-sizing: border-box;
		background-color: $themeColor;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #ffffff;
		font-size: 30rpx;
	}

	.Reset {
		width: 120rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>